<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 600px;
            height: auto;
            background-color: #dedede;
            object-fit: scale-down;
            object-position: center;
        }
    </style>
    <script src="./js/vue.js"></script>
    <script src="./js/v-lazy.js"></script>
</head>
<body>
    <div id="app">
        <!-- <img src="https://clubimg.club.vmall.com/data/attachment/forum/202007/17/232138tdjp1tk67eechwcv.jpg" alt="" srcset=""> -->
        <!-- <img 
            v-payload=" 'https://clubimg.club.vmall.com/data/attachment/forum/202007/17/232138tdjp1tk67eechwcv.jpg' "
            src="./img/loading.gif"
        >
        <hr>
        <img v-for="(img, index) in imgs" :key="index" v-payload="img" src="./img/loading.gif"> -->

        <img v-for="(img, index) in imgs" :key="index" v-lazy="img">
    </div>
</body>
<script>
    Vue.use(VueLazyload,{
        loading:"./img/loading.gif"
    }); // 模块化课程中讲解用法
    
    Vue.directive("payload",function(el,{ value }){
        let img = new Image();

        img.onload = function(){
            el.src = value;
        }

        img.src = value;
    })

    new Vue({
        el:"#app",
        data:{
            imgs:[
                "https://clubimg.club.vmall.com/data/attachment/forum/202007/17/232136aqlv6pplfjndvzea.jpg",
                "https://clubimg.club.vmall.com/data/attachment/forum/202007/17/232135d59krxqnqni1n8il.jpg",
                "https://clubimg.club.vmall.com/data/attachment/forum/202007/17/232132eyq8yfqfltqkltve.jpg",
                "https://clubimg.club.vmall.com/data/attachment/forum/202007/17/232138tdjp1tk67eechwcv.jpg"
            ]
        }
    })
    
    
</script>
</html>